<template>
    <el-row>
        <el-col class="zc-home-title"><h3>组织列表</h3></el-col>
    </el-row>
    <div class="zc-home-body">
        <div class="zc-home-wrap">
            <el-row v-if="company.companies && company.companies.length!==0" :gutter="20">
                <CompanyCard :company="company" v-for="company in company.companies"></CompanyCard>
            </el-row>
            <CompanyEmpty v-else @submit="onSubmit"></CompanyEmpty>
        </div>
    </div>
</template>
<script type="ts" setup>
import CompanyCard from "@/views/pages/company/card.vue";
import CompanyEmpty from "@/views/pages/company/empty.vue";
import {onMounted, reactive} from "vue";
import {listCompany} from "@/api/api.company";

const company = reactive({
    companies: [],
    params: {}
})
const doLoadData = (params) => {
    listCompany(params).then(res => {
        company.companies = res.data || [];
    })
}

const onSubmit = () => {
    doLoadData(company.params);
}

onMounted(() => {
    doLoadData(company.params);
});

</script>
